import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Input,Button,Modal,Select,Row,Col,Divider,Pagination,DatePicker,message,Popconfirm,Tabs } from 'antd';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
import styles from './index.less';
import {TimeSpan} from '../../utils';
const dateFormat = 'YYYY/MM/DD';
import moment from 'moment';
const TabPane = Tabs.TabPane;
const Option = Select.Option;
const Pages = ({ production, dispatch, loading }) => {
    const columns = [
        {
            title: '巡检点名称',
            dataIndex: 'pointName',
        },
        {
            title: '巡检点编号',
            dataIndex: 'pointNum',
        },
        {
            title: '巡检人员',
            dataIndex: 'userName',
        },
        {
            title: '巡检时间',
            dataIndex: 'checkTime',
            render:text => TimeSpan(text),
        },
        {
            title: '上报时间',
            dataIndex: 'checkTimeTow',
            render:(text,record) => TimeSpan(record.checkTime),
        },
        {
            title: '执行情况',
            dataIndex: 'situation',
        },
        {
            title: '操作',
            dataIndex: 'option',
            render:(text,record) => <a onClick={()=>{
                dispatch({type:"production/goList",payload:{id:record.id}});
            }}>查看</a>,
        },
    ];
    let {selectedRowKeys} = production;
    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedRowKeys) => {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            dispatch({type:"production/save",payload:{selectedRowKeys:selectedRowKeys}});
        },
    };
    return(
        <div className={styles.container}>
            <PagesGET dispatch={dispatch} {...production} loading={loading.global}/>
            <Tabs onChange={value =>{
                dispatch({type:"production/save",payload:{
                    tabsNum :value,
                    deleteValue:true,
                }});
                dispatch({type:"production/save",payload:{catalog_id:value}});
            }} type="card">
                <TabPane tab='全部' key='000'></TabPane>
                {
                    production.allobj && production.allobj.map(item =>{
                        return <TabPane tab={item.name} key={item.id}></TabPane>;
                    })
                }
            </Tabs>
            <Table columns={columns}
                rowSelection={rowSelection}
                size="small"
                pagination={false}
                loading={loading.global}
                rowKey={id=>id.id}
                dataSource={production.getProductionData || null} />
            <Pagination current={production.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={production.total}
                onChange={pages => { !loading.global && dispatch({type:'law/save',payload:{pages:pages}});}}/>
        </div>
    );
};

class PagesGET extends React.Component {


    constructor (props) {
        super(props);
        this.state = {
            userName:'',
            pointName:'',
            situation:'',
            time:[],
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
    //判断是否登录
        this.props.dispatch({type:"production/getProduction",payload:{
            userName:'',
            pointName:'',
            situation:'',
            start_time:'',
            end_time:'',
            pageNumber :1,
            pageSize :10,
        }});
    }

    render (){

        let { pages,record,view ,dispatch ,loading,tabsNum,selectedRowKeys} = this.props;
        let {time} = this.state;
        return (
            <div className={styles.containerit}>
                <Input value={this.state.userName } placeholder="姓名" style={{margin:10,width:200}}
                    onChange={e=>this.setState({userName :e.target.value})}/>
                <Input value={this.state.pointName } placeholder="巡检点" style={{margin:10,width:200}}
                    onChange={e=>this.setState({pointName :e.target.value})}/>
                <Select value={this.state.situation || undefined} style={{margin:10,width:200}} placeholder="执行情况" onChange={value =>{
                    this.setState({situation :value});
                }}>
                    <Option value="">全部</Option>
                    <Option value="1">计划外执行</Option>
                    <Option value="2">按时完成</Option>
                </Select>
                {tabsNum === '000' && <RangePicker value={time[0]?[moment(time[0], dateFormat), moment(time[1], dateFormat)]:[]} style={{margin:10 }}
                    style={{width:220,margin:10}}
                    onChange={(date, dateString)=>{
                        this.setState({
                            time:dateString,
                        });
                    }} />}
                <Button style={{marginLeft:10}} type='primary' onClick={()=>{
                    let {userName,pointName,situation,time} = this.state;
                    this.props.dispatch({type:"production/getProduction",payload:{
                        userName:userName,
                        pointName:pointName,
                        situation:situation,
                        start_time:time[0] || '',
                        end_time:time[1] || '',
                        tabsNum:tabsNum,
                        pageNumber :pages,
                        pageSize :10,
                    }});
                }}>查询</Button>
                <Button style={{marginLeft:10}} onClick={()=>{
                    this.setState({
                        userName:'',
                        pointName:'',
                        situation:'',
                        time:[],
                    });
                }
                }>重置</Button>
                <Button style={{margin:10}} onClick={()=>{
                    if(selectedRowKeys && selectedRowKeys.length >0){
                        this.props.dispatch({type:"production/download",payload:{
                            url:'/check/exportRecord',
                            data:{
                                id:selectedRowKeys,
                            },
                        }});
                    }else{
                        message.error('至少选择一项!!');
                    }

                }}>导出选中记录</Button>
            </div>
        );
    }

    componentWillReceiveProps (nextProps) {
        if (nextProps.deleteValue) {
            this.setState({
                userName:'',
                pointName:'',
                situation:'',
                time:[],
            });
            this.props.dispatch({type:"production/save",payload:{
                deleteValue:false,
            }});
            this.props.dispatch({type:"production/getProduction",payload:{
                userName:'',
                pointName:'',
                situation:'',
                start_time:'',
                end_time:'',
                tabsNum :nextProps.tabsNum,
                pageNumber :1,
                pageSize :10,
            }});
        }
        if(nextProps.pages !== this.props.pages){
            if(nextProps.pages == 1 && this.props.pages == 0){return;}
            let {userName,pointName,situation,time} = this.state;
            this.props.dispatch({type:"production/getProduction",payload:{
                userName:userName,
                pointName:pointName,
                situation:situation,
                start_time:time[0] || '',
                end_time:time[1] || '',
                tabsNum:nextProps.tabsNum,
                pageNumber :nextProps.pages == 0?1:nextProps.pages,
                pageSize :10,
            }});
        }
    }
}


Pages.propTypes = {
    production: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ production, loading }) => ({ production, loading }))(Pages);
